<template>
	<el-dialog
	  title="预览"
	  :visible.sync="visible"
	  :before-close="close"
    append-to-body
	  :close-on-click-modal="false"
	  width="90%">
    <el-card>
      <el-form label-position="left">
        <el-form-item label="检验依据:">
          <span v-html="according"></span>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
    	:data="dataList"
    	border
      ref="dragTable"
      row-key="inspectionItemId"
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        label="排序号"
      	prop="orderId"
      	header-align="center"
      	align="center"
        width="70">
      </el-table-column>
      <el-table-column
        label="编号"
      	prop="inspectionItemId"
      	header-align="center"
      	align="center"
        width="60">
      </el-table-column>
      <el-table-column
        label="分类"
      	prop="inspectionCategoryName"
      	header-align="center"
      	align="center"
        width="100">
      </el-table-column>
      <el-table-column
        label="检验项目"
      	prop="inspectionItemName"
      	header-align="center"
      	align="center"
        width="200">
      </el-table-column>
      <el-table-column
        label="标准规定(国家标准)"
      	prop="nationInspectionItemValue"
      	header-align="center"
      	align="center"
        width="400">
        <template slot-scope="scope">
          <span v-html="scope.row.printValue == 1 ? '应符合规定。' : scope.row.nationInspectionItemValue"></span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否用于打印"
      	prop="isPrint"
      	header-align="center"
      	align="center">
        <template slot-scope="scope">
          <el-button type="success" class="pan-btn success-btn" v-if="scope.row.isPrint == 0" @click="scope.row.isPrint = 1" size="mini">是</el-button>
          <el-button type="danger" class="pan-btn danger-btn" v-else @click="scope.row.isPrint = 0" size="mini">否</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="标准规定显示为应符合规定"
      	prop="printValue"
      	header-align="center"
      	align="center">
        <template slot-scope="scope">
          <el-button type="success" class="pan-btn success-btn" v-if="scope.row.printValue == 1" @click="scope.row.printValue = 0" size="mini">是</el-button>
          <el-button type="danger" class="pan-btn danger-btn" v-else @click="scope.row.printValue = 1" size="mini">否</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="检验结果为数值类型"
      	prop="isNumber"
      	header-align="center"
      	align="center">
        <template slot-scope="scope">
          <el-button type="success" class="pan-btn success-btn" v-if="scope.row.isNumber == 0" @click="scope.row.isNumber = 1" size="mini">是</el-button>
          <el-button type="danger" class="pan-btn danger-btn" v-else @click="scope.row.isNumber = 0" size="mini">否</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="检验结果显示为符合规定"
      	prop="printConfig"
      	header-align="center"
      	align="center">
        <template slot-scope="scope">
          <el-button type="success" class="pan-btn success-btn" v-if="scope.row.printConfig == 1" @click="scope.row.printConfig = 0" size="mini">是</el-button>
          <el-button type="danger" class="pan-btn danger-btn" v-else @click="scope.row.printConfig = 1" size="mini">否</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="排序"
        width="80">
        <template slot-scope="{}">
          <svg-icon icon-class="drag" class-name="drag-handler" />
        </template>
      </el-table-column>
    </el-table>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="close">取 消</el-button>
	    <el-button class="pan-btn primary-btn" type="primary" @click="submit">确 定</el-button>
  	</span>
	</el-dialog>
</template>

<script>
  import { isBlank,arrCompareByProp } from '@/common/js/utils'
  import Sortable from 'sortablejs'
	export default {
		data() {
			return {
				visible: false,
        standards: {},
        dataList: [],
        sortable: null,
        according: ''
			}
		},
		props: ["childDataForm"],
		created() {
			if (!isBlank(this.childDataForm)) {
        this.standards = this.childDataForm
        for (let i=0,j=this.standards.length; i<j; i++) {
          this.dataList.push(...JSON.parse(JSON.stringify(this.standards[i].items)))
          this.standards[i].items = []
          if (!isBlank(this.standards[i].nationInspectionStandardNum)) {
            this.according = this.according + '、' + this.standards[i].nationInspectionStandardNum
          }
        }
        this.dataList = this.dataList.sort(arrCompareByProp("orderId"))
        this.according = this.according.substr(1)
        this.visible = true
        this.$nextTick(() => {
          this.setSort()
        })
			}
		},
		methods: {
      close(val) {
      	this.$emit('close')
        if (val === 'submit') {
          for (let i=0,j=this.dataList.length; i<j; i++) {
            this.dataList[i].orderId = i + 1
            for (let x=0,y=this.standards.length; x<y; x++) {
              if (this.dataList[i].insideInspectionStandardId == this.standards[x].insideInspectionStandardId) {
                this.standards[x].items.push(this.dataList[i])
                break
              }
            }
          }
          this.$emit('getSimpleStandards',this.standards)
        }
      	this.visible = false
      },
      submit() {
        this.close('submit')
      },
      setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
          setData: function(dataTransfer) {
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData('Text', '')
          },
          onEnd: evt => {
            const targetRow = this.dataList.splice(evt.oldIndex, 1)[0]
            this.dataList.splice(evt.newIndex, 0, targetRow)
          }
        })
      }
    }
	}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
